<template>
  <body id="login-page">
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">商家登录</h3>
      <el-form-item>
        <el-input
          type="text"
          v-model="loginForm.loginName"
          auto-complete="off"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          v-model="loginForm.password"
          auto-complete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 40%;  border: none"
          @click="merchantLogin"
        >登录
        </el-button
        >
        <el-button
          type="primary"
          style="width: 40%;  border: none ;background-color: rgb(191, 231, 11)"
          @click="merchantRegister"
        >注册
        </el-button
        >
      </el-form-item>

    </el-form>

  </body>
</template>

<script>
  import {login} from "@/api/merchant";
  export default {
    name: "MerchantLogin",
    data() {
      return {
        loginForm: {
          loginName: "",
          password: "",
        },
        responseResult: [],
      };

    },
    methods: {
      //调用封装好的api方法，发起请求
      merchantLogin() {
        var _this = this;
        login({
            mName: this.loginForm.loginName,
            mPassword: this.loginForm.password
          }).then(result => {
            //登录成功，进行跳转
            if (result.data.code === 200) {
              //收到后端返回的成功代码时，触发 store 中的 mutation ,存储token 和user
              let data=result.data.data;
              let token=data.token;
              let merchant=data.merchant;
              //存储token
              _this.$store.commit('SET_TOKENN', token);
              //存储user，优雅一点的做法是token和user分开获取
              _this.$store.commit('SET_MERCHANT', merchant);
              // console.log(_this.$store.state.token);
              // console.log(this.$store.state.merchant.mid) //从本地store中获取mid
              this.$router.replace({path: '/Welcome'})
            } else {
              this.$message.error('登录失败,请检查用户名或密码');
            }
          })
          .catch(failResponse => {
            this.$message.error('登录失败');
          })
      },
      merchantRegister() {
        this.$router.replace({path: '/MerchantRegister'})
      },
    },
  };
</script>

<style scoped>
  #login-page {
    background: url("../assets/img/bg_m.png") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body {
    margin: 0px;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;

  }
</style>
